<template>
  <div>
    <el-tag closable type="primary" @close="onClose">
      {{ bankName }}
    </el-tag>

    <div class="row mt-3" v-loading="loading">
      <div class="col-sm-4">
        <div class="card p-3 bg-lg1">
          <div class="d-flex">
            <div class="flex-1">
              <num-panel label="在保金额(万元)" :num="inFunds"></num-panel>
            </div>
            <div class="flex-1">
              <num-panel label="在保项目(个)" :num="inCount"></num-panel>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="card p-3 bg-lg2">
          <div class="d-flex">
            <div class="flex-1">
              <num-panel label="解保金额(万元)" :num="outFunds"></num-panel>
            </div>
            <div class="flex-1">
              <num-panel label="解保项目(个)" :num="outCount"></num-panel>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="card p-3 bg-lg3">
          <div class="d-flex">
            <div class="flex-1">
              <num-panel label="新增金额(万元)" :num="newFunds"></num-panel>
            </div>
            <div class="flex-1">
              <num-panel label="新增项目(个)" :num="newCount"></num-panel>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getParams } from './reportMixins'

export default {
  components: {
    NumPanel: {
      props: {
        label: String,
        num: [String, Number],
      },
      render(h) {
        const { label, num } = this
        return h('div', {}, [
          h('div', { class: 'text-muted' }, label),
          h('div', { class: 'text-truncate', style: { fontSize: '2rem' } }, num),
        ])
      },
    },
  },
  props: {
    bankInfo: {
      type: Object,
      default: () => ({}),
    },
    queryParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      inCount: 0,
      outCount: 0,
      newCount: 0,
      inFunds: 0,
      outFunds: 0,
      newFunds: 0,
    }
  },
  computed: {
    ...mapGetters(['clientId']),
    bankId() {
      return this.bankInfo.agency_id
    },
    bankName() {
      return this.bankInfo.agency_name
    },
  },
  watch: {
    queryParams: {
      handler: function () {
        this.getData()
      },
      deep: true,
      immediate: true,
    },
    bankId() {
      this.getData()
    },
  },
  created() {},
  mounted() {},
  methods: {
    onClose() {
      this.$emit('close')
    },
    init() {
      this.inCount = 0
      this.outCount = 0
      this.newCount = 0
      this.inFunds = 0
      this.outFunds = 0
      this.newFunds = 0
    },
    getData() {
      this.init()

      if (!this.bankId) {
        return
      }

      this.getStatData()
    },
    async getCountData(queryParams, tableName = 'report_analysis_for_bank') {
      const params = {
        ...getParams({
          ...queryParams,
          isBIQuery: 1,
        }),
        'agency_id.eq': this.bankId,
      }
      const res = await this.$api.getData(this.$serviceName, tableName, params)
      return res.data || []
    },
    getStatData() {
      const params = {
        ...this.queryParams,
        groupFields: ['bank_type', 'bank_type_name'],
        groupFunc: `count(1),round(sum(warranty_amount)|2)`,
        fields: ['bank_type', 'bank_type_name'],
      }
      this.loading = true
      Promise.all([
        this.getCountData({ ...params, busStatus: 0 }),
        this.getCountData({ ...params, busStatus: 1 }),
        this.getCountData({ ...params, busStatus: 2 }),
      ])
        .then(([inData, outData, newData]) => {
          inData.forEach(data => {
            this.inCount += +data.p
            this.inFunds += +data.p1
          })
          outData.forEach(data => {
            this.outCount += +data.p
            this.outFunds += +data.p1
          })
          newData.forEach(data => {
            this.newCount += +data.p
            this.newFunds += +data.p1
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.bg-lg1 {
  border-color: rgba(255, 148, 16, 0.2);
  color: rgb(255, 148, 16);
  background: linear-gradient(45deg, rgba(255, 148, 16, 0.12), rgba(255, 187, 53, 0.12));
}
.bg-lg2 {
  border-color: rgba(40, 162, 30, 0.2);
  color: rgb(40, 162, 30);
  background: linear-gradient(45deg, rgba(40, 162, 30, 0.12), rgba(59, 220, 100, 0.12));
}
.bg-lg3 {
  border-color: rgba(84, 113, 255, 0.2);
  color: rgb(84, 113, 255);
  background: linear-gradient(45deg, rgba(84, 113, 255, 0.12), rgba(91, 176, 254, 0.12));
}
</style>
